<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>用户管理</span>
    </div>
    <div class="row">
      <div class="col-md-12 ">
        <form id="searchForm" class="form-inline">
            <div class="form-group jsg-group">
              <label class="sr-only" for="exampleInputEmail3">用户名、用户ID</label>
              <input type="text" class="form-control jsg-group-input" id="exampleInputEmail3" placeholder="用户名、用户ID、角色名" name="group" v-model="user">
            </div>          
          <button type="button" @click="loadData" class="btn btn-default">搜索</button>
          <router-link :to="{name: 'AddUser', params: {method: 'add', userId: 0}}" class="btn btn-default">添加用户</router-link>
        </form>
        <div class="table-responsive sbzgl-tab-list">
          <table class="table table-bordered" id="tblData">
                <thead>
                  <tr>
                <th width="5%">序号</th>
                <th width="10%">用户名</th>
                <th width="10%">用户ID</th>
                <th width="10%">固定电话</th>
                <th width="15%">手机</th>
                <th width="15%">电子邮箱</th>
                <th width="10%">角色</th>
                <th width="10%">操作</th> 
                  </tr>
                </thead>
              <tbody> 
                <tr v-for="(item, index) in page.list">
                  <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
                  <td>{{item.username}}</td>
                  <td>{{item.userid}}</td>
                  <td>{{item.mobile}}</td>
                  <td>{{item.telephone}}</td>
                  <td>{{item.email}}</td>
                  <td>
                    <select name="" id="">
                      <option value="" v-for="role in item.rolelist">{{role.rolename}}</option>
                    </select>
                  </td>
                  <td>
                    <router-link :to="{ name: 'AddUser', params: { method: 'edit', userId: item.userid } }"><span class="glyphicon glyphicon-edit"></span></router-link>&nbsp;
                    <a @click="del(item.userid, item.username)" title=""><span class="glyphicon glyphicon-trash"></span></a>
                  </td>
                </tr>
                </tbody>
              </table>
              <div class="pull-right">
                <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
              </div>
          </div>
      </div>
    </div>    
  </div>
</template>

<script>
  import page from '@/components/Page.vue'

  export default {
    name: 'RoleManage',
    components: { 'my-page': page },
    data: function () {
      return {
        user: '',
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        }
      }
    },
    created: function () {
      this.loadData()
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'GetUser', user: this.user}).then(response => {
          this.page.allList = response.data.HedaACK.Body.userlist || []
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      del: function (id, name) {
        window.duang.confirm('确认要删除《' + name + '》用户吗？', () => {
          this.$http.post('/api/hedacmdreq', {method: 'DeleteUser', userid: id}).then(response => {
            var body = response.data.HedaACK.Body
            if (body.retCode === '0') {
              window.duang.msg(true, body.retMsg)
              this.loadData()
            }
          })
        })
      }
    }
  }
</script>
